<template>
	<section>

		<el-col :span="24" class="toolbar"  style="padding-bottom: 0px;">
			
			<el-form :inline="true" >		
				<el-form-item>
					<el-input  v-model="key" placeholder="输入查询的关键字"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary"  @click="getList">查询</el-button>
				</el-form-item>
			</el-form>
		</el-col>			
		<!--工具条-->		
		<el-table :data="Lists" highlight-current-row v-loading="loading" style="width: 100%;">
			<el-table-column type="index" width='80'>
			</el-table-column>
			<el-table-column prop="name" label="课程名称" width="200">
			</el-table-column>
			<el-table-column prop="startTime" label="开课时间" width="200">
			</el-table-column>			
			<el-table-column label="课程简介" width="200">
		      <template scope="scope">
		        <el-popover trigger="hover" placement="top">
		          <div>课程简介: 	<div v-html="scope.row.intro "></div></div>
		          <div slot="reference" class="name-wrapper">
		            <el-tag>课程简介</el-tag>
		          </div>
		        </el-popover>
		      </template>
			</el-table-column>	
			<el-table-column prop="personCount" label="上课人数" width="200" sortable>
			</el-table-column>		
			<el-table-column prop="teamCount" label="上课组数" width="200"sortable >
			</el-table-column>			
			<el-table-column prop="realName" label="创建人"  width="200">
			</el-table-column>	
			<el-table-column prop="createTime" label="创建时间" width="200" sortable>
			</el-table-column>			
			<el-table-column prop="birth" min-width="200" label="操作" fixed="right">
				<template scope="scope">
					<el-button size="small" type="warning" @click="joinCourse(scope.row)" v-if="scope.row.isJoin==0">申请加入课程</el-button>
					<el-button size="small" type="danger" v-if="scope.row.isJoin==1">课程已申请</el-button>					
				</template>					
			</el-table-column>
		</el-table>
		<!--工具-->
		<el-col :span="24" class="toolbar">
			<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10" :total="total" style="float:right;">
			</el-pagination>
		</el-col>
	
	</section>
</template>
<script>
	import { coursestudentjoin,coursejoin} from '../../api/api';

	//import NProgress from 'nprogress'
	export default {
		data() {
			return {
				addFormVisible: false,//打分界面是否显示
				loading: false,
				dateloading:false,
				Lists: [],
				total:"",
				Calendardate:"",
				pageSize:'10',
				page:'1',
				key:'',
				date:"",
				type:"0",
				isSelf:'1',
				datelist:[],
			}
		},	
		methods: {	
			//页面跳转
		    skip(link,id,row){
		        this.$router.push(
		        	{
		        		path:link,
		        		query:{
		        			id:id,
		        		}
		        	}
		        )
		        sessionStorage.setItem("course",JSON.stringify(row))
		    },	
			handleCurrentChange(val) {
				this.page = val;
				this.getList();
			},			    
			//获取项目列表
			getList: function (type) {
				this.loading = true;
				var params={key:this.key}
				//NProgress.start();
				coursejoin(params).then((res) => {
					this.Lists = res;
					this.loading = false;
					//NProgress.done();
				});					
			},
			joinCourse:function(row,type){
				this.$confirm('确定加入本课程吗?', '提示', {
			        confirmButtonText: '确定',
			        cancelButtonText: '取消',					
					type: 'warning'
				}).then(() => {
					this.loading = true;
					var params=new URLSearchParams();
					params.append('courseId',row.courseId);
					coursestudentjoin(params).then((r) => {
						if(!r.error){
							this.$message({
								message: '申请成功',
								type: 'success'
							});
							this.loading = false;
							this.getList();		
							
						}else{
							this.$message({
								message:r.message,
								type: 'error'
							});		
							this.loading = false;
						}
					})	
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '取消共享'		
					});						
				});				
			
			},			
		},	
		mounted() {
			this.getList();
		}
	};

</script>
<style type="text/css">
	.el-carousel__item .coursedate {
    color: #fff;
    font-size: 14px;
    height: 200px;
    margin: 0;
    text-align: center;
  }
  .el-carousel__item .coursedate h1{
  	font-weight: bold;
  }
  .el-carousel__item .coursedate .intro{
	 overflow : hidden;
	text-overflow: ellipsis;
	max-height:50px;
	width: 100%;
	white-space: nowrap;
	text-align: left;
  }
  .el-carousel__item:nth-child(2n) {
    background-color:#495A80;
    
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color:#20a0ff;
  }
</style>